<script setup>
  import { ref, onMounted } from 'vue'
  import msgApi from '@/apis/message.js'
  // 1. 定义数组
  const list = ref([])

  onMounted(() => {
    getList()
  })

  // 2. 定义方法操作数组
  // contentType:201：司机端系统通知
  async function getList(contentType = 201) {
    try {
      let { code, data, msg } = await msgApi.list(contentType)
      list.value = data.items
      console.log(list.value)
    } catch (err) {}
  }
</script>
<template>
  <scroll-view class="scroll-view" refresher-enabled scroll-y>
    <view class="scroll-view-wrapper">
      <view class="message-action">
        <text class="iconfont icon-clear"></text>
        全部已读
      </view>
      <uni-card
        v-for="item in list"
        :key="item.id"
        :border="false"
        :is-shadow="false"
      >
        <view class="brief">{{ item.content }}</view>
        <view class="extra">
          <text class="time">{{ item.created }}</text>
          <navigator
            hover-class="none"
            class="link"
            :url="`/subpkg_task/detail/index?id=${item.id}`"
            >查看详情</navigator
          >
        </view>
        <template v-slot:title>
          <view class="title unread">{{ item.title }}</view>
        </template>
      </uni-card>

      <view v-if="list.length == 0" class="message-blank">暂无消息</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
